<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  // 获取API调用接口
  import { setAddressAPI, getAddressIdAPI, putAddressIdAPI } from '@/services/address'
  import { useMemberStore } from '@/stores/index'
  const memberStore = useMemberStore()

  // 表单数据
  const form = ref({
    receiver: '', // 收货人
    contact: '', // 联系方式
    fullLocation: '', // 省市区(前端展示)
    provinceCode: '', // 省份编码(后端参数)
    cityCode: '', // 城市编码(后端参数)
    countyCode: '', // 区/县编码(后端参数)
    address: '', // 详细地址
    isDefault: 0, // 默认地址，1为是，0为否
  })

  // 获取页面携带参数
  const query = defineProps<{
    id ?: string
  }>()


  // 修改地址接口获取
  const getAddressId = async () => {
    if (query.id) {
      const { result } = await getAddressIdAPI(query.id)
      Object.assign(form.value, result)
    }
  }

  // 动态标题
  uni.setNavigationBarTitle({
    title: query.id ? "修改地址" : "新建地址"
  })

  // 选择地址
  const onCityChange : UniHelper.RegionPickerOnChange = (res) => {
    // 前端展示
    form.value.fullLocation = res.detail.value.join(' ')
    // 后端上传
    const [provinceCode, cityCode, countyCode] = res.detail.code!
    // 合并数据-相当于
    //form.value.XXX=XXX
    Object.assign(form.value, { provinceCode, cityCode, countyCode })
  }


  // 是否默认地址
  const onAddressChange : UniHelper.SwitchOnChange = (res) => {
    form.value.isDefault = res.detail.value ? 1 : 0
  }

  // 保存
  const onSubmit = async () => {
    if (memberStore.profile?.token) {
      try {
        // 表单校验
        await formsRef.value?.validate?.()
        // 判断有没有传id，新建或修改
        if (query.id) {
          await putAddressIdAPI(query.id, form.value)
        }
        else {
          await setAddressAPI(form.value)
        }
        uni.showToast({
          icon: "success",
          title: "保存成功"
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      } catch (error) {
        uni.showToast({
          icon: "error",
          title: "请填写完整信息"
        })
      }
    }
    else {
      uni.showModal({
        content: "此操作需要登录",
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: "/pages/login/login"
            })
          }
        }
      })
    }


  }

  // 表单校验规则
  const rules : UniHelper.UniFormsRules = {
    receiver: {
      rules: [
        { required: true, errorMessage: '请输入姓名' }
      ]
    },
    contact: {
      rules: [
        { required: true, errorMessage: '请输入手机号' },
        { pattern: /^1[0-9]\d{9}$/, errorMessage: '请输入1开头的11位手机号' }
      ]
    },
    fullLocation: {
      rules: [
        { required: true, errorMessage: '请输入所在地区' }
      ]
    },
    address: {
      rules: [
        { required: true, errorMessage: '请输入详细地址' }
      ]
    }
  }
  // 表单实例
  const formsRef = ref<UniHelper.UniFormsInstance>()

  onLoad(async () => {
    // 根据id获得地址详情
    await getAddressId()
  })
</script>

<template>
  <view class="content">
    <uni-forms :rules="rules" :model="form" ref="formsRef">
      <!-- 表单内容 -->
      <uni-forms-item name="receiver" class="form-item">
        <text class="label">收货人</text>
        <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
      </uni-forms-item>
      <uni-forms-item name="contact" class="form-item">
        <text class="label">手机号码</text>
        <input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" />
      </uni-forms-item>
      <uni-forms-item name="fullLocation" class="form-item">
        <text class="label">所在地区</text>
        <picker @change="onCityChange" class="picker" mode="region" :value="form.fullLocation.split(' ')">
          <view v-if="form.fullLocation">{{form.fullLocation}}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item name="address" class="form-item">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
      </uni-forms-item>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <switch @change="onAddressChange" class="switch" color="#27ba9b" :checked="form.isDefault===1" />
      </view>
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button class="button" @tap="onSubmit">保存并使用</button>
</template>

<style lang="scss">
  page {
    background-color: #f4f4f4;
  }

  .content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .form-item,
    .uni-forms-item {
      display: flex;
      align-items: center;
      min-height: 96rpx;
      padding: 25rpx 10rpx 40rpx;
      background-color: #fff;
      font-size: 28rpx;
      border-bottom: 1rpx solid #ddd;
      position: relative;
      margin-bottom: 0;

      // 调整 uni-forms 样式
      .uni-forms-item__content {
        display: flex;
      }

      .uni-forms-item__error {
        margin-left: 200rpx;
      }

      &:last-child {
        border: none;
      }

      .label {
        width: 200rpx;
        color: #333;
      }

      .input {
        flex: 1;
        display: block;
        height: 46rpx;
      }

      .switch {
        position: absolute;
        right: -20rpx;
        transform: scale(0.8);
      }

      .picker {
        flex: 1;
      }

      .placeholder {
        color: #808080;
      }
    }
  }

  .button {
    height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
  }
</style>
